<template>
  <div class="login-container">
    <!-- 顶部logo区域 -->
    <div class="logo-area">
      <div class="logo">
        <i class="fas fa-lock"></i>
      </div>
      <h1>DRM平台</h1>
    </div>

    <!-- 登录卡片 -->
    <div class="login-card">
      <!-- 角色切换 -->
      <div class="role-tabs">
        <div
          :class="['tab-item', { active: loginType === 'admin' }]"
          @click="loginType = 'admin'"
        >
          管理端登录
        </div>
        <div
          :class="['tab-item', { active: loginType === 'employee' }]"
          @click="loginType = 'employee'"
        >
          员工端登录
        </div>
      </div>

      <!-- 登录方式切换 -->
      <div class="method-tabs">
        <div
          :class="['method-tab', { active: loginMethod === 'password' }]"
          @click="loginMethod = 'password'"
        >
          密码登录
        </div>
        <!-- <div
          :class="['method-tab', { active: loginMethod === 'sms' }]"
          @click="loginMethod = 'sms'"
        >
          短信登录
        </div> -->
      </div>

      <!-- 登录表单 -->
      <div class="form-container">
        <!-- 用户名/手机号输入 -->
        <div class="input-group">
          <div class="input-icon">
            <i class="fas fa-user"></i>
          </div>
          <input
            type="text"
            :placeholder="
              loginMethod === 'password' ? '请输入用户名' : '请输入手机号'
            "
            v-model="username"
            class="form-input"
            :disabled="loading"
          />
        </div>

        <!-- 密码输入框 -->
        <div class="input-group" v-if="loginMethod === 'password'">
          <div class="input-icon">
            <i class="fas fa-lock"></i>
          </div>
          <input
            :type="showPassword ? 'text' : 'password'"
            placeholder="请输入密码"
            v-model="password"
            class="form-input"
            :disabled="loading"
            @keyup.enter="handleLogin"
          />
          <div class="password-toggle" @click="showPassword = !showPassword">
            <i :class="['fas', showPassword ? 'fa-eye-slash' : 'fa-eye']"></i>
          </div>
        </div>

        <!-- 短信验证码输入框 -->
        <div class="input-group sms-group" v-else>
          <div class="input-icon">
            <i class="fas fa-comment-alt"></i>
          </div>
          <input
            type="text"
            placeholder="请输入验证码"
            v-model="smsCode"
            class="form-input"
            :disabled="loading"
          />
          <button
            :class="['sms-btn', { disabled: countdown > 0 || loading }]"
            :disabled="countdown > 0 || loading"
            @click="sendSmsCode"
          >
            {{ countdown > 0 ? `${countdown}s后重新获取` : "获取验证码" }}
          </button>
        </div>

        <!-- 记住密码 -->
        <div class="remember-me" v-if="loginMethod === 'password'">
          <label class="checkbox-container">
            <input
              type="checkbox"
              v-model="rememberPassword"
              :disabled="loading"
            />
            <span class="checkmark"></span>
            记住密码
          </label>
        </div>

        <!-- 登录按钮 -->
        <button
          class="login-btn"
          @click="handleLogin"
          :disabled="loading"
          :class="{ loading: loading }"
        >
          <span v-if="loading" class="btn-loading">
            <i class="fas fa-spinner fa-spin"></i>
            登录中...
          </span>
          <span v-else>
            {{ loginType === "admin" ? "登录" : "登录" }}
          </span>
        </button>

        <!-- 消息提示 -->
        <div v-if="message.text" :class="['message', message.type]">
          <i
            :class="[
              'fas',
              message.type === 'success'
                ? 'fa-check-circle'
                : 'fa-exclamation-circle',
            ]"
          ></i>
          {{ message.text }}
        </div>

        <!-- 其他登录方式 -->
        <!-- <div class="other-login-methods">
          <p>其他登录方式</p>
          <div class="methods">
            <div class="method-item">
              <i class="fab fa-weixin"></i>
            </div>
            <div class="method-item">
              <i class="fab fa-qq"></i>
            </div>
          </div>
        </div> -->
      </div>
    </div>

    <!-- 底部信息 -->
    <!-- <div class="footer">
      <p>© 2023 企业办公系统 | 技术支持: 400-123-4567</p>
    </div> -->
  </div>
</template>

<script>
import { login, sendSmsCode } from "../../api/index";
export default {
  name: "LoginPage",
  data() {
    return {
      loginType: "admin", // admin, employee
      loginMethod: "password", // password, sms
      username: "",
      password: "",
      smsCode: "",
      showPassword: false,
      rememberPassword: false,
      countdown: 0,
      loading: false,
      message: {
        text: "",
        type: "", // success, error
      },
    };
  },
  methods: {
    // 显示消息
    showMessage(text, type = "error") {
      this.message = { text, type };
      // 3秒后自动清除消息
      setTimeout(() => {
        this.message.text = "";
      }, 3000);
    },

    // 发送短信验证码
    async sendSmsCode() {
      if (this.countdown > 0 || this.loading) return;

      if (!this.username) {
        this.showMessage("请输入手机号");
        return;
      }

      this.loading = true;
      try {
        let data = {
          mobile: this.username,
        };
        await sendSmsCode(data);
        this.showMessage("验证码发送成功", "success");

        // 开始倒计时
        this.countdown = 60;
        const timer = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            clearInterval(timer);
          }
        }, 1000);
      } catch (error) {
        this.showMessage("验证码发送失败，请重试");
      } finally {
        this.loading = false;
      }
    },

    // 处理登录
    async handleLogin() {
      // 表单验证
      if (!this.username) {
        this.showMessage(
          this.loginMethod === "password" ? "请输入用户名" : "请输入手机号"
        );
        return;
      }

      if (this.loginMethod === "password" && !this.password) {
        this.showMessage("请输入密码");
        return;
      }

      if (this.loginMethod === "sms" && !this.smsCode) {
        this.showMessage("请输入验证码");
        return;
      }

      this.loading = true;
      this.message.text = ""; // 清除之前的消息

      try {
        let data = {
          username: this.username,
          password: this.password,
          loginType: 1,
        };

        const res = await login(data);

        if (res.code === 200) {
          localStorage.setItem("userId", res.data.id);
          localStorage.setItem("unitId", res.data.unitId);
          this.showMessage("登录成功", "success");
          // 延迟跳转，让用户看到成功消息
          setTimeout(() => {
            // 根据登录类型跳转到不同页面
            if (this.loginType === "admin") {
              this.$router.push({ name: "管理者-首页" });
            } else {
              this.$router.push({ name: "员工端-首页" });
            }
          }, 1000);
        } else {
          this.showMessage(res.message || "登录失败，请检查用户名和密码");
        }
      } catch (error) {
        console.error("Login error:", error);
        this.showMessage("登录失败，请检查网络连接或联系管理员");
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
/* 基础样式 */
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Logo区域 */
.logo-area {
  text-align: center;
  margin-bottom: 30px;
  color: white;
}

.logo {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}

.logo i {
  font-size: 36px;
  color: white;
}

.logo-area h1 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 2px;
}

/* 登录卡片 */
.login-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
}

/* 角色切换标签 */
.role-tabs {
  display: flex;
  background: #f5f7fa;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.tab-item.active {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: #2575fc;
}

/* 登录方式切换 */
.method-tabs {
  display: flex;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 25px;
}

.method-tab {
  padding: 12px 0;
  margin-right: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #999;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.method-tab.active {
  color: #2575fc;
}

.method-tab.active:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #2575fc;
  border-radius: 3px;
}

/* 表单样式 */
.input-group {
  position: relative;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  background: #f5f7fa;
  border-radius: 12px;
  padding: 0 15px;
  height: 56px;
  transition: all 0.3s ease;
}

.input-group:focus-within {
  background: #eef2f7;
  box-shadow: 0 0 0 2px rgba(37, 117, 252, 0.1);
}

.input-icon {
  width: 24px;
  color: #999;
  margin-right: 10px;
}

.form-input {
  flex: 1;
  border: none;
  background: transparent;
  height: 100%;
  font-size: 16px;
  outline: none;
}

.form-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.password-toggle {
  color: #999;
  cursor: pointer;
  padding: 5px;
  transition: color 0.3s ease;
}

.password-toggle:hover {
  color: #2575fc;
}

/* 短信验证码样式 */
.sms-group {
  padding-right: 5px;
}

.sms-btn {
  background: #2575fc;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.sms-btn:hover:not(.disabled) {
  background: #1c68e0;
  transform: translateY(-1px);
}

.sms-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

/* 记住密码 */
.remember-me {
  margin-bottom: 20px;
}

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  transition: color 0.3s ease;
}

.checkbox-container:has(input:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  height: 18px;
  width: 18px;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-right: 8px;
  position: relative;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
}

.checkbox-container input:checked ~ .checkmark {
  background-color: #2575fc;
  border-color: #2575fc;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 15px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.login-btn:not(.loading):hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(37, 117, 252, 0.3);
}

.login-btn:active:not(.loading) {
  transform: translateY(0);
}

.login-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  transform: none !important;
}

.login-btn.loading {
  background: linear-gradient(135deg, #8a45d5 0%, #4a8afc 100%);
}

.btn-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 消息提示 */
.message {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  animation: slideIn 0.3s ease;
}

.message.success {
  background: #f0f9ff;
  color: #067647;
  border: 1px solid #a0e9c1;
}

.message.error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 其他登录方式 */
.other-login-methods {
  text-align: center;
}

.other-login-methods p {
  color: #999;
  font-size: 14px;
  margin-bottom: 15px;
  position: relative;
}

.other-login-methods p:before,
.other-login-methods p:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: #eee;
}

.other-login-methods p:before {
  left: 0;
}

.other-login-methods p:after {
  right: 0;
}

.methods {
  display: flex;
  justify-content: center;
  gap: 25px;
}

.method-item {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.method-item:active {
  transform: scale(0.95);
}

/* 底部信息 */
.footer {
  margin-top: 30px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-card {
    padding: 20px;
  }

  .tab-item {
    font-size: 14px;
    padding: 10px;
  }

  .method-tab {
    font-size: 15px;
    margin-right: 15px;
  }

  .input-group {
    height: 50px;
  }

  .login-btn {
    padding: 14px;
  }

  .method-item {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }
}
</style>
